<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_jQuery使用</title>
</head>

<body>
    <div>
        <button id="btn">测试</button>
        <br />
        <input type="text" name="msg1" /><br />
        <input type="text" name="msg2" /><br />
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        // //1. jQuery函数
        // console.log($, typeof $)
        // console.log(jQuery === $)
        // //2. jQuery对象
        // console.log($() instanceof Object)
        // 需求.点击按钮：显示按钮的文本，显示一个新的输入框
        //     需求2。遍历输出数组中所有元素值
        //     需求3.去掉”my atguigu"两端的空格
        $(function () {
            $('#btn').click(function () {
                alert($(this).html())
                $('<input type="text" name="msg3" /><br />').appendTo('div')
            })
        })
        //     需求2。遍历输出数组中所有元素值
        var arr = [2, 4, 5, 6, 8]
        $.each(arr, function (index, item) {
            console.log(index, item)
        })

        //     需求3.去掉”my atguigu"两端的空格
        var str = '  my atguigu  '
        console.log('-----' + str.trim() + '------')
        console.log('-----' + $.trim(str) + '------')

    </script>
</body>

</html>